<!DOCTYPE html>
<html lang="en" >
<head>
	<title>SignUp</title>
	<!-- Jquery -->
	<script src="js/jquery-1.11.2.min.js"></script>
	<!-- AngularJS -->
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
	<!-- Angular application -->
	<script type="text/javascript" src="js/app.js"></script>
	<!-- Bootstrap -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="css/myStyle.css"/>
</head>
<body class="registration" bgproperties="fixed">

	<!-- angular registration application -->
	<div ng-app="registrationForm" ng-controller="regFormController" ng-submit="RegForm.$valid && (!checkfiftywords()) && AddUser()"> 
		<form novalidate name="RegForm" class="regForm ">
			<!-- User Name -->
			<label class="RegFormFirstLabel">User Name</label>
			<br/><input type="text" class="form-control RegFormInput" name="Username" placeholder="Username" ng-model="Username"  ng-maxlength=10 required/>
		 	<small class="col-sm-offset-3 help-block error AngularErr" ng-show="RegForm.Username.$error.maxlength">
        		User name must be no longer than 10 characters</small>        	
        	<small class="col-sm-offset-3 help-block error AngularErr" ng-show="RegForm.Username.$error.required">
        		*Field required</small>
        		
			<!-- Password -->
			<label class="RegFormLabelName">Password</label>	
			<br/><input type="password" class="form-control RegFormInput" id="Password" name="Password" placeholder="Password" ng-model="Password"  ng-maxlength=8 required/>
			<small class="col-sm-offset-3 help-block error AngularErr" ng-show="RegForm.Password.$error.maxlength">
        		Password must be no longer than 8 characters</small>
        	<small class="col-sm-offset-3 help-block error AngularErr" ng-show="RegForm.Password.$error.required">
        		*Field required</small>
        		
			<!-- Nickname -->
			<label class="RegFormLabelName">Nickname</label>
		 	<input type="text" class="form-control RegFormInput" id="Nickname" name="Nickname" placeholder="Nickname" ng-model="Nickname"  ng-maxlength=20 required/>
		 	<small class="col-sm-offset-3 help-block error AngularErr" ng-show="RegForm.Nickname.$error.maxlength">
        		Nick name must be no longer than 20 characters</small>
        	<small class="col-sm-offset-3 help-block error AngularErr" ng-show="RegForm.Nickname.$error.required">
        		*Field required</small>
        		
			<!-- Photo URL -->
			<label class="RegFormLabelName">Photo URL</label>
			<input type="text" class="form-control RegFormInput" id="Photo" name="Photo" placeholder="Photo URL" ng-model="Photo"/>
	
			<!-- Description -->
			<label class="RegFormLabelName" for="Description">Description</label>
			<textarea class="form-control RegFormInput" rows="4" id="Description" name="Description" placeholder="Description" ng-model="Description" ></textarea>
			<small class="col-sm-offset-3 help-block error AngularErr" ng-show="checkfiftywords()">
        		Description must be no longer than 50 words</small>	  
	
			<!-- Sign Up Button -->
			<button type="submit" class="Mybutton SignUpbtnPos">Sign up</button>
	
			<!-- Reset Button -->
			<button ng-click="reset()" class="Mybutton resetpbtnPos">Reset</button>
			<br>
		</form>
	</div>
	
	<!-- Alert message if the user successfully registered -->
	<div class="alert alert-success alert-dismissible succAlert" id="SuccesAlert" role="alert">
  		<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  		<strong>Congratulations!</strong>  You have successfully registered
	</div>
	
	<!-- Alert message if something went wrong with the registration -->
	<div class="alert alert-danger alert-dismissible errorAlert" id="errorAlert" role="alert">
  		<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  		<strong>Sorry,</strong>  registration failed
	</div>
	 
</body>
</html>